<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="msyh.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body id="body">
    <div id="login-card" class="login-card"><img id="back-to-login" onclick="goback()" class="back-to-login"
            src="add.svg" />
        <form id="add-form" class="add-form">
            <div class="title">SIGN UP</div>
            <div id="nameform" class="input">
                <div class="input-tag">USER NAME</div><input type="text" name="user">
            </div>
            <div id="passwordform" class="input">
                <div class="input-tag">PASSWORD</div><input type="password" name="password">
            </div>
            <div id="confirmform" class="input">
                <div class="input-tag">CONFIRM PASSWORD</div><input type="password" name="password">
            </div>
            <div id="add-new-submit" class="add-new-submit" onclick="shake(this)">Submit</div>
        </form>
        <div id="add-new" class="add-new" onclick="add(this)"><img id="plus-img" class="plus-img" src="add.svg" /></div>
        <form id="login-form" class="login-form">
            <div id="login-title" class="title">LOGIN</div>
            <div class="input">
                <div class="input-tag">USER NAME</div><input type="text" name="user">
            </div>
            <div class="input">
                <div class="input-tag">PASSWORD</div><input type="password" name="password">
            </div>
            <div id="login-submit" class="login-submit" onclick="shake(this)">Submit</div>
        </form>
    </div>
    <div class="copyright"><a href="http://panda.panda-studio.cn/" target="_blank">&copy Coded by Panda</a></div>
</body>
<footer>
    <script src="script.js"></script>
</footer>

<pre>
    https://blog.panda-studio.cn/login-screen
    实现时的问题主要在于如何解决右上角的“添加”按钮在放大后刚好覆盖到对话框的问题。我的解决办法如下

详细信息
1、把“添加”按钮写为“对话框”的子类

2、添加按钮的位置样式要“position:absolute”，就可以弄到父类的外面了

3、用Javascript控制“添加”按钮的位置，动态移动到中间后（放大前），将父类“对话框”的样式“overflow”属性改为“hidden”

4、“添加”按钮的圆形放大之后就刚好覆盖到“对话框”上了
</pre>

</html>